<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        .box {
            width: 300px;
            height: 300px;
            margin: 10px auto;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        全选<input type="checkbox">
        <div>
            选项一：<input type="checkbox"></br>
            选项二：<input type="checkbox"></br>
            选项三：<input type="checkbox"></br>
            选项四：<input type="checkbox"></br>
        </div>
    </div> 
    <script>
        var btnAll = document.querySelector(".box > input");            //选中全选标签元素
        var btnEles = document.querySelectorAll(".box div > input");    //选中所有单选元素标签
        btnAll.onclick = function () {                                  //当点击全选时
            var type = btnAll.checked ;                                 //获取全选标签元素的checked值，并赋值给type
            btnEles.forEach(function(item){                             //遍历单选标签元素，将全选的状态赋值给单选状态
                item.checked = type;
            });
        }
        // 1.方法1
        // Array.from(btnEles).forEach(function( btnEle , key , arr ){
        //     btnEle.onclick = function (){
        //         if ( !btnEle.checked ){
        //             btnAll.checked = false ; 
        //         } else {
        //             var res = arr.every(function(item){
        //                 return item.checked;
        //             });
        //             if ( res ) {
        //                 btnAll.checked = true ; 
        //             }
        //         }
        //     }
        // });
        // 2.方法2
        btnEles.forEach(function(item){                     //遍历单选标签元素
            item.onclick = function () {                    //当点击任意一个单选框时
                var flag = true ;                           //假定此时所有单选框被选中
                btnEles.forEach(function(btnEle){           //遍历所有单选框
                    if(!btnEle.checked){                    //如果有单选框的checked属性值为false，表示这个单选框没有被选中
                        flag = false ;                      //假定不成立，存在单选框未被选中，将flag设为false
                    }                                       //如果单选框全被选中，表示，原假定成立，不做其他操作
                });                                         
                btnAll.checked = flag ;                     //将flag实际的值赋值给全选按钮的checked属性
            }
        });
    </script>
</body>
</html>